<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <link rel="stylesheet" href="css/index.css" />
        <script src="js/serverUrl.js"></script>
        <script src="js/vue.js"></script>
    </head>
    <style type="text/css">
        .appBody{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        .titleContainer{
            display: flex;
            background-color: #C7000A;
            padding-top: 2vw;
            padding-bottom: 1vw;
            justify-content: space-between;
        }
        .logo{
            width: 40vw;
            height: 8vw;
            margin-left: 1vw;
        }
        .operation{
            display: flex;
            border-radius: 4vw;
            height: 8vw;
            width: 45vw;
            justify-content: space-between;
            align-items: center;
            margin-right: 3vw;
            background-color: rgba(255, 255, 255, 0.5);
        }
        .opeartionImg{
            width: 6vw;
            height: 6vw;
            margin-left: 2vw;
            margin-right: 2vw;
        }
        .content{
            flex: 1;
            display: flex;
            justify-content: space-between;
            background-color: #C7000A;
            padding-left: 2vw;
            padding-right: 2vw;
            padding-bottom: 1vw;
        }
        
        .rbImage{
            bottom: 6vw;
            left: 0;
            position: absolute;
            width: 60vw;
            height: auto;
        }
        
        .ltImage{
            top: 9vw;
            right: 0;
            position: absolute;
            width: 30vw;
            height: auto;
        }
        
        .white{
            bottom: 0;
            position: absolute;
            width: 100vw;
            height: 2vw;
            border-top-left-radius: 2vw;
            border-top-right-radius: 2vw;
            background-color: white;
        }
        
        .info{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .name{
            font-size: 3.5vw;
            color: white;
        }
        .company{
            font-size: 3.5vw;
            margin-top: 1vw;
            color: white;
        }
        .score{
            font-size: 4vw;
            color: white;
        }
    </style>
    <body>
        <div id="app" class="appBody">
            <div class="titleContainer">
                <div style="display: flex;align-items: center;">
                    <img style="width: 8vw;height: 8vw;margin-left: 2vw;border-radius: 4vw;" src="img/jinneng_logo_120-1.png"/>
                    <img src="img/new_logo.png" class="logo" />
                </div>
                
                <div class="operation">
                    <img src="img/search.png" class="opeartionImg" />
                    <div style="width: 19vw;height: 8vw;" @click.stop="toSearch"></div>
                    <img src="img/scan.png" class="opeartionImg" @click.stop="toScan"/>
                </div>
            </div>
            <div class="content">
                <div class="info" @click.stop="toUserCenter">
                    <div class="name" >{{companyName}},{{userName}}</div>
                </div>
                <div class="info"  @click.stop="toPoint">
                    <div class="score">积分：</div>
                    <div class="score">{{point}}</div>
                </div>
                <div class="info"  >
                    <div class="score">在线人数：</div>
                    <div class="score">{{onlineNum}}</div>
                </div>
            </div>
            
            <div class="white">
            
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
              point: 0,
              userName: '',
              companyName: '',
              onlineNum: ''
          },
          created() {
              window.getPoint = this.getPoint
              window.getUserName = this.getUserName
              window.getCompanyName = this.getCompanyName
              window.getUserCount = this.getUserCount
          },
          methods:{
              getUserCount (userCount){
                  this.onlineNum = userCount
              },
              getUserName (userName){
                  this.userName = userName
              },
              getCompanyName (companyName){
                  this.companyName = companyName
              },
              getPoint (point){
                  if(point != null){
                      this.point = point
                  }
                  
              },
              toUserCenter () {
              },
              toPoint (){
                  WebViewJavascriptBridge.callHandler('toPoint',{});
              },
              toSearch (){
                  WebViewJavascriptBridge.callHandler('toSearch',{});
              },
              toScan () {
                WebViewJavascriptBridge.callHandler('toScan',{});
              }
          }
        })
        </script>
</html>
